@import 'partials/variables';

$pl-item-image-size: 24px;
$pl-item-padding: 10px;
$pl-item-width: $pl-item-image-size + ($pl-item-padding * 2);
$pl-item-height: $pl-item-width;

// Basic reset for toolbar
.pl-toolbar,
.pl-toolbar * {
    background: none;
    border: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transition: none;
}

// Toolbar
.pl-toolbar {
    position: fixed;
    z-index: 9999;
    bottom: 20px;
    right: 20px;
    background: $postleaf-black;
    border-radius: $border-radius;
    color: white;
}

// Toolbar items
.pl-item {
    background-repeat: no-repeat;
    background-position: center;
    background-size: $pl-item-image-size $pl-item-image-size;
    color: white;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    width: $pl-item-width;
    height: $pl-item-height;
    line-height: $pl-item-height;
    float: left;
    transition: .2s transform ease;
    &:hover {
        color: #09d;
        transform: scale(1.2);
    }
}

// Icons via SVG
.pl-home { background-image: url('../img/logo-color.svg'); }
.pl-new-post { background-image: url('../img/icon-plus-white.svg'); }
.pl-edit-post, .pl-edit-author, .pl-edit-tag { background-image: url('../img/icon-pencil-white.svg'); }